<template>
	<div>
		<div class="container">
			<div class="row">
				<!-- 容器分成12列 -->
				<div class="col-12 col-sm-9 col-md-7 col-lg-5 m-auto pt-5">
					<div class="card mt-5">
						<div class="card-header bg-white">
							<h3 class="text-center mb-0 text-secondary">{{$conf.logo}}</h3>
						</div>
						<div class="card-body">
							<el-form ref="ruleForm" :rules="rules" :model="form" >
								<el-form-item prop="username">
									<el-input v-model="form.username" 
									size="medium" 
									placeholder="请输入用户名"></el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input v-model="form.password" 
									size="medium" 
									placeholder="请输入密码" 
									type="password"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button 
									size="medium" 
									class="w-100"
									type="primary"
									:loading="loading"
									@click="submit">
										{{loading ? '登录中...' : '立即登录'}}
									</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				loading: false,
				
				form: {
					username: '',
					password: ''
				},
				
				rules: {
					username: [
						{required: true, message: '请输入用户名', trigger: 'blur'}
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'}
					]
				}
			}
		},
		
		computed: {
			...mapGetters([
				'adminIndex'
			])
		},
		
		methods: {
			submit() {
				this.$refs.ruleForm.validate((e) => {
					if(!e) return
					this.loading = true
					//提交表单
					this.axios.post('/admin/login',this.form)
					.then(res => {
						let data = res.data.data
						//存储到vuex
						//登录信息存储到本地存储
						this.$store.commit('login', data)
						//存储权限规则
						if (data.role && data.role.rules) {
							window.sessionStorage.setItem('rules', JSON.stringify(data.role.rules))
						}
						//生成菜单信息，保存到本地
						this.$store.commit('createNavBar', data.tree)
						//成功提示
						this.$message('登录成功')
						this.loading = false
						//跳转到后台首页
						this.$router.push({name: this.adminIndex})
					}).catch(err => {
						this.loading = false
					})
				})
			}
		}
	}
</script>

<style>
</style>
